<template>
  <div>
  <h2>房型列表</h2>
  房型名称:<input type="text" v-model="state.FXName">
  房型大小:<input type="text" v-model="state.FXMJ">
   <input type="button" value="查询" @click="FangXingShow">
   <table border="1">
    <tr>
      <td>房型名称</td>
      <td>房型图片</td>
      <td>房型描述</td>
      <td>房型状态</td>
      <td>操作</td>

    </tr>
    <tr v-for="item in list">
      <td>{{item.fxName}}</td>
      <td>
        <img :src="item.fxPhoto" alt="" width="60" height="60">
      </td>
      <td>{{ item.fxms }}</td>
      <td>{{ item.fxzt }}</td>
      <td>
        <input type="button" value="删除" @click="FangXingShan">
      </td>

    </tr>
   </table>



  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const route = useRoute();

let data:any=reactive({
  state:{
    index:1,
    size:2,
    FXName:'',
    FXMJ:''
  },
  list:[],
  Count:0,
  Count2:0
})
let {state,list,Count,Count2}=toRefs(data);

onMounted(() => {
  FangXingShow()
})


function FangXingShan(){
  if(confirm('是否要删除'))
{
  alert('删除成功')
  return
}
  
}
function FangXingShow(){
  let obj={
    index:state.value.index,
    size:state.value.size,
    FXName:state.value.FXName,
    FXMJ:state.value.FXMJ
  }
  axios({
    url:'https://localhost:7143/api/FangXing/FangXingShow',
    method:'get',
    params:obj
  })
  .then(res=>{
   
  
    list.value=res.data.data,
    Count.value=res.data.count
    Count2.value=res.data.count2
    
  })
  .catch(err=>{
  console.log(err)
})


  
}



</script>

<style scoped>

</style>